<template>
  <div id="indexs" :style="{ width, height }"></div>
</template>

<script>
import { queryPointList } from '@/api/collection/board'
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'indexs',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }

  },
  data() {
    return {
      chart: null,
      timer: null
    }
  },
  watch: {},
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
    //设置定时器
    this.timer = setInterval(() => {
      this.initChart()
    }, 5000)
  },

  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    initChart() {
      const echarts = this.$echarts
      if (this.chart === null) {
        this.chart = echarts.init(document.getElementById('indexs'))
      }

      queryPointList().then((response) => {
        let pie1Data = [
          {
            value: response._PR.length,
            name: '压力',
            itemStyle: {
              color: '#72FFA3'
            }
          },
          {
            value: response._ACT.length,
            name: '侧轴',
            itemStyle: {
              color: '#FF7469'
            }
          },
          {
            value: response._TEMP.length,
            name: '温度',
            itemStyle: {
              color: '#FF7F50'
            }
          },
          {
            value: response._SPEED.length,
            name: '转速',
            itemStyle: {
              color: '#2BD8FB'
            }
          },
          {
            value: response._CURRENT.length,
            name: '电流',
            itemStyle: {
              color: '#00FF00'
            }
          },
          {
            value: response.other.length,
            name: '其他',
            itemStyle: {
              color: '#FFE269'
            }
          }
        ]

        var percentColor = null
        var rich = {
          name: {
            color: '#fff',
            fontSize: 14
          }
        }
        pie1Data.map(function(item, index) {
          rich['p' + index] = {
            color: item.itemStyle.color,
            fontSize: 17,
            fontWeight: 'bold'
          }
        })

        var option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)',
            backgroundColor: '#1B2D56',
            borderColor: '#2BD8FB',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '测点分类',
              type: 'pie',
              radius: '70%',
              center: ['50%', '50%'],
              label: {
                color: '#fff',
                fontSize: 14,

                formatter: function(params) {
                  percentColor = params.color
                  return `{name|${params.name}}:{p${params.dataIndex}|${params.percent + '%'}}`
                },
                rich: rich
              },
              data: pie1Data,
              roseType: 'area'
            }
          ]
        }

        this.chart.setOption(option)
      })

    }
  }
}
</script>
